import React from 'react';
import {observer, inject} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {List, Icon, Flex} from 'weaver-mobile';
import {RouteLayout} from 'weaver-mobile-page';
import * as SignUtil from "../../../util/SignUtil";
import * as VariableKeys from "../../../constants/variableKey";
import VoicePaly from '../../../public/wf-voice-playback/index';
import {getLabel} from '../../../util/common';

const Item = List.Item;

/**
 * 语音录入列表
 */
@inject('wfSignInputStore')
@withRouter
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {wfSignInputStore} = this.props;
        const {isForwad, Adapter} = wfSignInputStore;
        const soundResourceKey = isForwad ? VariableKeys.FORWARD_SIGN_SPEECH_ATTCHMENT_DATAS : VariableKeys.SIGN_SPEECH_ATTCHMENT_DATAS;
        const soundDatas = SignUtil.getVariableMapVal(soundResourceKey, []);

        return (
            <div className={'wf-sign-sound-list'}>
                <div className={'add-sign-input'}>
                    <div className={'sign-input-btn'} onClick={()=>{Adapter.voice();}}>
                        <Icon type={'plus'}/>
                        <span>{getLabel(500253,'添加语音')}</span>
                    </div>
                </div>
                <div className={'annex-data-list'}>
                    <div>
                        {soundDatas && soundDatas.map((item, index) => {
                            const {fileid, datasrc} = item;
                            return (
                                <Flex className={'annex-row'} key={`audio_${fileid}`}>
                                    <div className={'col-icon'}>
                                        <Icon type={'delete-o'} onClick={() => this.deleteItem(fileid)}/>
                                    </div>
                                    <div className={'col-info'}>
                                        <div className={'file-name'}>
                                            <VoicePaly datasrc={datasrc}/>
                                        </div>
                                    </div>
                                </Flex>
                            )
                        })}
                    </div>
                </div>
                {this.getBottomBtn()}
            </div>
        )
    }

    getBottomBtn() {
        const {history} = this.props;
        const btns = [{
            key: "confirm",
            text: getLabel(826,"确定"),
            type: "primary",
            onClick: () => {
                history.go(-1);
            }
        }];
        return <RouteLayout.ButtonGroup data={btns}/>;
    }

    deleteItem(fileid) {
        const {wfSignInputStore} = this.props;
        const {isForwad, controlVariableMap} = wfSignInputStore;
        const soundResourceKey = isForwad ? VariableKeys.FORWARD_SIGN_SPEECH_ATTCHMENT_DATAS : VariableKeys.SIGN_SPEECH_ATTCHMENT_DATAS;
        const soundDatas = SignUtil.getVariableMapVal(soundResourceKey, []);
        let __soundDatas = soundDatas.filter((item) => item.fileid !== fileid);
        controlVariableMap(soundResourceKey, __soundDatas);
    }
}